<template>
    <div class="bound">
        <slot></slot>
        <div v-if="element && element.component === 'Group'">
            <Bound :id="system.SYSTEM_PREVIEW_BOX + element.id" class="box" v-show="getShow(item)"
                v-for="(item, index) in element.attribute.children" :key="index" :style="{
                    ...style.getBoxStyle(item),
                    top: util.toInteger(item.attribute.pOption.groupStyle.top.pixel * element.style.height.pixel) + 'px',
                    left: util.toInteger(item.attribute.pOption.groupStyle.left.pixel * element.style.width.pixel) + 'px',
                    height: util.toInteger(item.attribute.pOption.groupStyle.height.pixel * element.style.height.pixel) + 'px',
                    width: util.toInteger(item.attribute.pOption.groupStyle.width.pixel * element.style.width.pixel) + 'px',
                }">
                <component :pageList="pageList" :is="item.component" :mode="2" :element="item" :style="{
                    ...style.getElementStyle(item),
                    height: util.toInteger(item.attribute.pOption.groupStyle.height.pixel * element.style.height.pixel) + 'px',
                    width: util.toInteger(item.attribute.pOption.groupStyle.width.pixel * element.style.width.pixel) + 'px',
                }" :id="system.SYSTEM_PREVIEW_ELEMENT + item.id" @click.native.stop="elementClick(item)"
                    @mouseenter.native.stop="elementEnter(item)" @mouseleave.native.stop="elementLeave(item)" />
            </Bound>
        </div>
    </div>
</template>

<script>
import style from '@/js/util/style.js';
import system from '@/js/main/system.js';
import bus from '@/js/event/bus.js';
import util from '@/js/util/util.js';
import elementMixin from "@/js/main/elementMixin.js";

export default {
    mixins: [elementMixin],
    props: {
        element: {
            require: true,
            type: Object
        },
        canvas: {
            require: true,
            type: Object
        },
        pageList: {
            require: true,
            type: Array
        }
    },
    data() {
        return {
            window: window,
            system: system,
            style: style,
            util: util
        };
    },
    methods: {
        elementClick(element) {
            bus.elementMouseEvent(element, 'click');
        },
        elementEnter(element) {
            bus.elementMouseEvent(element, 'mouseenter');
        },
        elementLeave(element) {
            bus.elementMouseEvent(element, 'mouseleave');
        },
        getShow(item) {
            let visible = false;
            if (this.pageList[item.attribute.page].visible || item.attribute.visible) {
                visible = true;
            }
            if (this.pageList[item.attribute.page].visible === false) {
                visible = false
            }
            if (item.attribute.visible === false) {
                visible = false;
            }
            return visible
        }
    }
};
</script>
<style scoped>
.bound {
    position: absolute;
}
</style>